<template>



  <div class="ui attached pointing menu">
    <div class="ui container">
      <div class="right menu">
        <a href="/admin/blog-input" class="teal active item">发布</a>
        <a href="/admin/blog" class="item">列表</a>
      </div>
    </div>
  </div>
  <!--中间内容-->
  <div  class="m-container m-padded-tb-big">
    <div class="ui container">
      <form id="blog-form" action="#" method="post" class="ui form">
        <div class="required field">
          <div class="ui left labeled input">
            <div class="ui selection compact teal basic dropdown label">

              <el-select v-model="flag" placeholder="原创" >
                <el-option
                    v-for="item in flags"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <input v-model="title" type="text" name="title" placeholder="标题">
          </div>
        </div>


        <div class="required field" style="text-align: left">
          <v-md-editor v-model="content" height="400px"></v-md-editor>
        </div>
        <div class="two fields">
          <div class="required field">
            <div class="ui left labeled action input">
              <label class="ui compact teal basic label">分类</label>
              <div class="ui fluid selection dropdown" >

                <el-select v-model="typeId" placeholder="分类" style="width: 250px !important; height: 20px !important;">
                  <el-option
                      v-for="item in types"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                  >
                  </el-option>
                </el-select>

<!--                <input type="hidden" name="type.id">-->
<!--                <i class="dropdown icon"></i>-->
<!--                <div class="default text">分类</div>-->
<!--                <div class="menu">-->
<!--                  <div class="item" data-value="1">错误日志</div>-->
<!--                </div>-->
              </div>
            </div>
          </div>
          <div class=" field">
            <div class="ui left labeled action input">
              <label class="ui compact teal basic label">标签</label>
              <div class="ui fluid selection multiple search  dropdown">


                <el-select v-model="tagIds" multiple placeholder="请选择" style="width: 250px !important; height: 20px !important;">
                  <el-option
                      v-for="item in tags"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                  >
                  </el-option>
                </el-select>


              </div>
            </div>
          </div>
        </div>

        <div class="required field">
          <div class="ui left labeled input">
            <label class="ui teal basic label">首图</label>
            <input v-model="firstPicture" type="text" name="firstPicture" placeholder="首图引用地址">
          </div>
        </div>

        <div class="required field">
          <textarea v-model="description" name="description" placeholder="博客描述..." maxlength="200"></textarea>
        </div>

        <div class="inline fields">
          <div class="field">
            <div class="ui checkbox">
              <input v-model="recommend" type="checkbox" id="recommend" name="recommend" class="hidden">
              <label for="recommend">推荐</label>
            </div>
          </div>
          <div class="field">
            <div class="ui checkbox">
              <input v-model="shareStatement" type="checkbox" id="shareStatement" name="shareStatement" class="hidden">
              <label for="shareStatement">转载声明</label>
            </div>
          </div>
          <div class="field">
            <div class="ui checkbox">
              <input v-model="appreciation" type="checkbox" id="appreciation" name="appreciation" class="hidden">
              <label for="appreciation">赞赏</label>
            </div>
          </div>
          <div class="field">
            <div class="ui checkbox">
              <input v-model="commentabled" type="checkbox" id="commentabled" name="commentabled" class="hidden">
              <label for="commentabled">评论</label>
            </div>
          </div>
        </div>

        <div class="ui error message"></div>

        <div class="ui right aligned container">
          <button type="button" class="ui button" onclick="window.history.go(-1)" >返回</button>
          <button @click="upLoad(0)" type="button" id="save-btn" class="ui secondary button">保存</button>
          <button @click="upLoad(1)" type="button" id="publish-btn" class="ui teal button">发布</button>
        </div>

      </form>
    </div>
  </div>
  <br>
  <br>

</template>

<script>
import axios from "axios";

export default {
  data(){
    return{
      blogId: '',
      text: '',
      firstPicture: '',
      title: '',
      content: '',
      appreciation: '',
      shareStatement: '',
      commentabled: '',
      published: '',
      recommend: '',
      typeId: '',
      tagIds: '',
      description: '',
      tags: [],
      types: [],
      flags: [
        {
          value: '原创',
          label: '原创',
        },
        {
          value: '转载',
          label: '转载',
        },
        {
          value: '翻译',
          label: '翻译',
        }
      ],
      flag: ''
    }
  },
  name: "BlogInput",
  mounted() {
    // this.getStu();
    // this.getM();
    // this.showAxios();
    this.getTypeAndTag();
  },
  methods: {
    getTypeAndTag(){
      if (this.$store.state.edit === 1){  //说明是编辑
        this.blogId = this.$store.state.blogId;
        // alert(this.blogId);
        axios.get('http://localhost:7070/blog/'+this.blogId).then((res)=>{
          // console.log(res.)
          this.firstPicture = res.data.blog.firstPicture;
          this.title = res.data.blog.title;
          this.content = res.data.blog.content;
          this.appreciation = res.data.blog.appreciation;
          this.shareStatement = res.data.blog.shareStatement;
          this.commentabled = res.data.blog.commentabled;
          this.recommend = res.data.blog.recommend;
          this.typeId = res.data.blog.typeId;
          this.description = res.data.blog.description;
        })
      };
      axios.get('http://localhost:7070/tag-type').then((res)=>{
        console.log(res.data);
        this.types = res.data.types;
        this.tags = res.data.tags;
      });
    },
    upLoad(pub){
      let pj = this.tagIds;
      let str = pj.join(",");
      // alert(str);
      // for (var i   in this.tagIds){
      //   tagsStr+""+i;
      // }
      // alert(tagsStr);
      if (this.$store.state.edit === 1){
        this.blogId = this.$store.state.blogId;
      }else {
        this.blogId = '';
      }
      console.log();
      axios({
        method:"post",
        url:"http://localhost:7070/admin/blog",
        data:{
          published: pub,
          title: this.title,
          content: this.content,
          firstPicture: this.firstPicture,
          appreciation: this.appreciation,
          shareStatement: this.shareStatement,
          commentabled: this.commentabled,
          recommend: this.recommend,
          typeId: this.typeId,
          tagIds: str,
          description: this.description,
          flag: this.flag,
          id: this.blogId
        }
      }).then((res)=>{
        console.log(res.data);
        sessionStorage.setItem('blogSuccess',"1");
      });
      this.$router.push({path: '/admin/blog'});
      // this.$store.commit('')
    }
  }
}
</script>

<style scoped>

</style>